<template>
  <a-card title="我的订单">
    <a-spin :spinning="loading">
      <a-tabs @change="onTabs">
        <a-tab-pane key="" tab="全部订单"></a-tab-pane>
        <a-tab-pane v-for="(item,index) in statusOpts" :key="index" :tab="item"></a-tab-pane>
        <!--      <a-tab-pane key="4" tab="退款中"></a-tab-pane>-->
        <!--      <a-tab-pane key="5" tab="退款完成"></a-tab-pane>-->
        <template slot="tabBarExtraContent">
          <a-input-search @search="onSearch" placeholder="商品名称/订单编号" style="width: 250px" />
        </template>
      </a-tabs>
      <div class="table-operator">
        <a-empty v-if="orderList.length === 0">
          <span slot="description"> 暂无订单~~ </span>
          <a-button type="danger" @click="$router.push({ name: 'index' })">立刻下单</a-button>
        </a-empty>
        <div v-else class="order-list">
          <div class="order-t" style="margin-bottom:5px">
            <a-row type="flex">
              <a-col :span="14" :order="1">
                订单详情
              </a-col>
              <a-col :span="4" :order="2">
                金额
              </a-col>
              <a-col :span="3" :order="3">
                状态
              </a-col>
              <a-col :span="3" :order="4">
                操作
              </a-col>
            </a-row>
          </div>
          <div v-for="item in orderList" :key="item.id" class="order-item">
            <div class="order-t">
              <a-space size="large">
                <div>{{item.created_at}}</div>
                <div>订单编号：{{item.order_no}}</div>
              </a-space>
            </div>
            <div class="order-c">
              <a-row type="flex">
                <a-col :span="14" :order="1">
                  <div class="product-cover">
                    <dl>
                      <dd>
                        <img width="88" height="88" :src="item.image" />
                      </dd>
                      <dt>
                        <h4>{{item.name}}</h4>
                        <p><ellipsis :length="30">{{item.describe}}</ellipsis></p>
                      </dt>
                    </dl>
                  </div>
                </a-col>
                <a-col :span="4" :order="2">
                  ￥{{item.price}}
                </a-col>
                <a-col :span="3" :order="3">
                  <a-tag>{{statusOpts[item.status]}}</a-tag>
                </a-col>
                <a-col :span="3" :order="4">
<!--                  <a-button style="margin-bottom:5px" size="small" type="default" block>订单详情</a-button>-->
                  <a-button v-if="item.status == 10" size="small" type="danger" block @click="$router.push({ name: 'Pay', params: { no: item.order_no } })">付款</a-button>
                  <a-button v-if="item.status == 20" size="small" type="default" block @click="$router.push({ name: 'ProductDetail', params: { id: item.id } })">再次购买</a-button>
                </a-col>
              </a-row>
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </a-card>
</template>

<script>
import Ellipsis from '@/components/Ellipsis/Ellipsis'
import { getOrderList } from '@/api/order'

export default {
  components: {
    Ellipsis
  },
  name: 'OrderList',
  data () {
    return {
      orderList: [],
      dataLength: 0,
      queryParam: {},
      statusOpts: {},
      loading: false,
      pagination: {
        page: 1,
        total_count: 0,
        page_size: 10
      },
      pendingNum: '',
      successNum: '',
      allNum: ''
    }
  },
  created () {
    this.getOrderList(this.queryParam)
  },
  methods: {
    getOrderList (parameter) {
      const app = this
      app.loading = true
      getOrderList(Object.assign(parameter, this.pagination)).then(res => {
        app.orderList = res.result.data
        app.statusOpts = res.result.statusOpts
        app.pagination.total_count = res.result.total_count
        app.pendingNum = res.result.pendingCount
        app.successNum = res.result.successCount
        app.allNum = res.result.allCount
        app.loading = false
      })
    },
    onTabs (key) {
      delete this.queryParam['filter[name]']
      this.queryParam['filter[status]'] = key
      this.getOrderList(this.queryParam)
    },
    onSearch (value) {
      this.queryParam['filter[name]'] = value
      this.getOrderList(this.queryParam)
    }
  }
}
</script>

<style scoped>
/deep/ .ant-tabs-nav .ant-tabs-tab-active {
  color: #f00
}
/deep/ .ant-tabs-ink-bar {
  height: 1px;
  background: #f00;
}
.order-item {
  border: 1px solid #eee;
}
.order-t {
  background: #f3f3f3;
  height: 38px;
  line-height: 38px;
  padding-left: 20px;
  font-size: 14px;
  color: #999;
}
.order-c {
  padding: 20px;
}
.product-cover dl dd {
  width:88px;
  float:left;
  margin-right:20px;
}
.product-cover dl dt h4 {
  font-size: 16px;
}
/deep/ .ant-pagination-item-active {
  border-color: #f00
}
/deep/ .ant-pagination-item-active a {
  color: #f00
}
</style>
